<template>
	<div id="">
		<div class="header">
			<div class="head-top">
				<mt-header title="音频">
					<router-link to="/videoclass" slot="left">
						<mt-button icon="back"></mt-button>
					</router-link>

				</mt-header>
			</div>

			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' id='education'>教育类</mt-tab-item>
				<mt-tab-item class='nav-title' id='military'>军事类</mt-tab-item>
				<mt-tab-item class='nav-title' id='student'>学生类</mt-tab-item>
				<mt-tab-item class='nav-title' id='other'>其他类</mt-tab-item>
			</mt-navbar>
		</div>

		<mt-tab-container v-model="active" swipeable>
			
			<mt-tab-container-item id="education">
				<education></education>
			</mt-tab-container-item>

			<mt-tab-container-item id="military">
				<military></military>
			</mt-tab-container-item>
			
			<mt-tab-container-item id="student">
				<student></student>
			</mt-tab-container-item>
			
			<mt-tab-container-item id="other">
				<other></other>
			</mt-tab-container-item>
			

		</mt-tab-container>
	</div>
</template>

<script>
	import education from './education.vue'
	import military from './military.vue'
	import student from './student.vue'
	import other from './other.vue'
	

	export default {
		components:{
			education,military,student,other
		},
		data(){
			return {
				active:'education',
			}
		}
	}
</script>

<style scoped>
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 1px solid #e60012;
		color: #e60012;
	}
	.home-nav {
		margin-bottom: 15px;
	}
</style>